<section id="button" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>inline</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/button/" data-element-name="button" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="button">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/button" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#button">
        <span>#</span>
        button
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a clickable <strong>button</strong>.</p>

    </div>
  </header>

      <div id="button-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#button-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
            <div class="example-output"><button>
  Submit form
</button></div>
          <div id="button-example-0-code" class="example-code">{% highlight html %}<button>
  Submit form
</button>{% endhighlight %}</div>
        </article>
      </div>

    <article id="button-name" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="name">
            name
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the unique identifier for that button within the form. It allows the server to access each button&#39;s value when submitted.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="button-name-submit_button" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;submit_button&quot;" data-clipboard-text="name=&quot;submit_button&quot;">
                      "submit_button"
                  </code>
                </h4>
              <div class="value-description">
                <p>The name value must be unique within the context of a <code>&lt;form&gt;</code> container.</p>
<p>It can only contain alphanumeric characters <code>a-z</code> <code>A-Z</code> <code>0-9</code> and some special characters like <code>-</code> <code>_</code>… but no space.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><button  name="submit_button">Submit form</button></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="button-value" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="value">
            value
          </code>
        </h3>
        <div class="attribute-description">
          <p>The value sent to the server when submitting the form.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="button-value-primary" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy value=&quot;primary&quot;" data-clipboard-text="value=&quot;primary&quot;">
                      "primary"
                  </code>
                </h4>
              <div class="value-description">
                <p>The server will receive the value <code>primary</code>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><button  value="primary">Submit form</button></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="button-type" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="type">
            type
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the button type.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="button-type-submit" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;submit&quot;" data-clipboard-text="type=&quot;submit&quot;">
                      "submit"
                  </code>
                </h4>
              <div class="value-description">
                <p>The button sends the form data to the server.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><button  type="submit">Submit form</button></div>
            </aside>
          </article>
          <article id="button-type-reset" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;reset&quot;" data-clipboard-text="type=&quot;reset&quot;">
                      "reset"
                  </code>
                </h4>
              <div class="value-description">
                <p>The button resets the form.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><button  type="reset">Reset</button></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="button-disabled" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="disabled">
            disabled
          </code>
        </h3>
        <div class="attribute-description">
          <p>Disables the button.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="button-disabled-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><button  disabled>Submit form</button></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="button-autofocus" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="autofocus">
            autofocus
          </code>
        </h3>
        <div class="attribute-description">
          <p>Sets focus on the element when the web page loads.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="button-autofocus-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><button >Submit form</button></div>
            </aside>
          </article>
      </div>
    </article>
</section>

<section id="fieldset" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>block</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/fieldset/" data-element-name="fieldset" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="fieldset">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/fieldset" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#fieldset">
        <span>#</span>
        fieldset
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a <strong>group of controls</strong> within a form.</p>

    </div>
  </header>

      <div id="fieldset-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#fieldset-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
            <div class="example-output"><form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form></div>
          <div id="fieldset-example-0-code" class="example-code">{% highlight html %}<form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>{% endhighlight %}</div>
        </article>
      </div>

    <article id="fieldset-disabled" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="disabled">
            disabled
          </code>
        </h3>
        <div class="attribute-description">
          <p>Disables the controls the fieldset contains.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="fieldset-disabled-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><fieldset  disabled><legend>Subscribe to the Newsletter</legend>
<input type="email" name="email">
<button>Ok</button></fieldset></div>
            </aside>
          </article>
      </div>
    </article>
</section>

<section id="form" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>block</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/form/" data-element-name="form" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="form">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/form" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#form">
        <span>#</span>
        form
      </a>
    </h2>
    <div class="element-description">
      <p>Defines an <strong>interactive form</strong> with controls.</p>

    </div>
  </header>

      <div id="form-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#form-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
            <div class="example-output"><form action="/signup" method="post">
  <p>
    <label>Title</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Last name</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>Email</label><br>
    <input type="email" name="email" required>
  </p>
  <p>
    <label>Phone number</label><br>
    <input type="tel" name="phone">
  </p>
  <p>
    <label>Password</label><br>
    <input type="password" name="password">
  </p>
  <p>
    <label>Country</label><br>
    <select>
      <option>China</option>
      <option>India</option>
      <option>United States</option>
      <option>Indonesia</option>
      <option>Brazil</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      I agree to the <a href="/terms">terms and conditions</a>
    </label>
  </p>
  <p>
    <button>Sign up</button>
    <button type="reset">Reset form</button>
  </p>
</form></div>
          <div id="form-example-0-code" class="example-code">{% highlight html %}<form action="/signup" method="post">
  <p>
    <label>Title</label><br>
    <label>
      <input type="radio" name="title" value="mr">
      Mr
    </label>
    <label>
      <input type="radio" name="title" value="mrs">
      Mrs
    </label>
    <label>
      <input type="radio" name="title" value="miss">
      Miss
    </label>
  </p>
  <p>
    <label>First name</label><br>
    <input type="text" name="first_name">
  </p>
  <p>
    <label>Last name</label><br>
    <input type="text" name="last_name">
  </p>
  <p>
    <label>Email</label><br>
    <input type="email" name="email" required>
  </p>
  <p>
    <label>Phone number</label><br>
    <input type="tel" name="phone">
  </p>
  <p>
    <label>Password</label><br>
    <input type="password" name="password">
  </p>
  <p>
    <label>Country</label><br>
    <select>
      <option>China</option>
      <option>India</option>
      <option>United States</option>
      <option>Indonesia</option>
      <option>Brazil</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox" value="terms">
      I agree to the <a href="/terms">terms and conditions</a>
    </label>
  </p>
  <p>
    <button>Sign up</button>
    <button type="reset">Reset form</button>
  </p>
</form>{% endhighlight %}</div>
        </article>
      </div>

    <article id="form-action" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="action">
            action
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines which URL the form&#39;s information is sent to when submitted.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="form-action-contact" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy action=&quot;/contact&quot;" data-clipboard-text="action=&quot;/contact&quot;">
                      "/contact"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use a <strong>relative</strong> URL.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  action="/contact"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-action-siteurlcontact" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy action=&quot;{{site.url}}/contact&quot;" data-clipboard-text="action=&quot;{{site.url}}/contact&quot;">
                      "{{site.url}}/contact"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use an <strong>absolute</strong> URL.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  action="{{site.url}}/contact"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="form-method" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="method">
            method
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the HTTP method used when submitting the form.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="form-method-post" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy method=&quot;post&quot;" data-clipboard-text="method=&quot;post&quot;">
                      "post"
                  </code>
                </h4>
              <div class="value-description">
                <p>The form information is sent to the server as part of the <strong>request body</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  method="post"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-method-get" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy method=&quot;get&quot;" data-clipboard-text="method=&quot;get&quot;">
                      "get"
                  </code>
                </h4>
              <div class="value-description">
                <p>The form information is sent to the server as part <strong>URL parameters</strong>: <code>/contact?first_name=Alex&amp;last_name=Smith</code>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  method="get"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="form-name" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="name">
            name
          </code>
        </h3>
        <div class="attribute-description">
          <p>The form&#39;s name when sent to the server. Useful when multiple forms are present on the same web page.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="form-name-sign_up_form" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;sign_up_form&quot;" data-clipboard-text="name=&quot;sign_up_form&quot;">
                      "sign_up_form"
                  </code>
                </h4>
              <div class="value-description">
                <p>The name value must be unique within the context of the whole web page.</p>
<p>It can only contain alphanumeric characters <code>a-z</code> <code>A-Z</code> <code>0-9</code> and some special characters like <code>-</code> <code>_</code>… but no space.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  name="sign_up_form"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="form-autocomplete" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="autocomplete">
            autocomplete
          </code>
        </h3>
        <div class="attribute-description">
          <p>Determines if the browser can autocomplete all the form&#39;s controls.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="form-autocomplete-off" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy autocomplete=&quot;off&quot;" data-clipboard-text="autocomplete=&quot;off&quot;">
                      "off"
                  </code>
                </h4>
              <div class="value-description">
                <p>The browser will <strong>disable</strong> autocomplete functions. This can however be overriden for each control individually.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  autocomplete="off"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-autocomplete-on" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy autocomplete=&quot;on&quot;" data-clipboard-text="autocomplete=&quot;on&quot;">
                      "on"
                  </code>
                </h4>
              <div class="value-description">
                <p>The browser will <strong>enable</strong> autocomplete functions. This can however be overriden for each control individually.</p>
<p>Try pressing &quot;down&quot; in this input. It will show previously entered email addresses.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  autocomplete="on"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="form-target" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="target">
            target
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines in which tab or window the clicked link will show up.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="form-target-_blank" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy target=&quot;_blank&quot;" data-clipboard-text="target=&quot;_blank&quot;">
                      "_blank"
                  </code>
                </h4>
              <div class="value-description">
                <p>Opens in a new browsing context, which is usually a <strong>new tab</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  href="https://htmlreference.io" target="_blank"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-target-_self" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy target=&quot;_self&quot;" data-clipboard-text="target=&quot;_self&quot;">
                      "_self"
                  </code>
                </h4>
              <div class="value-description">
                <p>Opens in the current tab.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  href="https://htmlreference.io" target="_self"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-target-_parent" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy target=&quot;_parent&quot;" data-clipboard-text="target=&quot;_parent&quot;">
                      "_parent"
                  </code>
                </h4>
              <div class="value-description">
                <p>Opens in the parent browsing context, or <code>_self</code> is there is none.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  href="https://htmlreference.io" target="_parent"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-target-_top" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy target=&quot;_top&quot;" data-clipboard-text="target=&quot;_top&quot;">
                      "_top"
                  </code>
                </h4>
              <div class="value-description">
                <p>Opens in the top browsing context, or <code>_self</code> is there is none.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  href="https://htmlreference.io" target="_top"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="form-enctype" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="enctype">
            enctype
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">MIME type</a> of the information sent to the server. Only works if the method is <code>post</code>.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="form-enctype-applicationx-www-form-urlencoded" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy enctype=&quot;application/x-www-form-urlencoded&quot;" data-clipboard-text="enctype=&quot;application/x-www-form-urlencoded&quot;">
                      "application/x-www-form-urlencoded"
                  </code>
                </h4>
              <div class="value-description">
                  <strong class="value-is-default">Default.</strong>
                <p>The <strong>default</strong> value.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  enctype="application/x-www-form-urlencoded"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-enctype-textplain" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy enctype=&quot;text/plain&quot;" data-clipboard-text="enctype=&quot;text/plain&quot;">
                      "text/plain"
                  </code>
                </h4>
              <div class="value-description">
                <p>For HTML5 plain text.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  enctype="text/plain"><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
          <article id="form-enctype-multipartform-data" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy enctype=&quot;multipart/form-data&quot;" data-clipboard-text="enctype=&quot;multipart/form-data&quot;">
                      "multipart/form-data"
                  </code>
                </h4>
              <div class="value-description">
                <p>Needed when using an <code>&lt;input type=&quot;file&quot;&gt;</code> element.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  enctype="multipart/form-data"><label>Upload</label><br><input type="file"></form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="form-novalidate" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="novalidate">
            novalidate
          </code>
        </h3>
        <div class="attribute-description">
          <p>Tells the browser to not validate the form on submission.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="form-novalidate-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form  novalidate><label>Email</label><br><input type="email" name="email" placeholder="e.g. alex@smith.com"> <button>Ok</button></form></div>
            </aside>
          </article>
      </div>
    </article>
</section>

<section id="input" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>inline</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            Yes
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/input/" data-element-name="input" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="input">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/input" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#input">
        <span>#</span>
        input
      </a>
    </h2>
    <div class="element-description">
      <p>Defines an <strong>interactive control</strong> within a web form.</p>

    </div>
  </header>

      <div id="input-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#input-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
            <div class="example-output"><input type="text" name="first_name" placeholder="e.g. Alex"></div>
          <div id="input-example-0-code" class="example-code">{% highlight html %}<input type="text" name="first_name" placeholder="e.g. Alex">{% endhighlight %}</div>
        </article>
      </div>

    <article id="input-type" class="attribute attribute--required">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="type">
            type
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the type of form input.</p>

            <strong class="attribute-is-required">Required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="input-type-text" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;text&quot;" data-clipboard-text="type=&quot;text&quot;">
                      "text"
                  </code>
                </h4>
              <div class="value-description">
                <p>Simple single line text input that accepts any type of character</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  type="text"></input></div>
            </aside>
          </article>
          <article id="input-type-email" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;email&quot;" data-clipboard-text="type=&quot;email&quot;">
                      "email"
                  </code>
                </h4>
              <div class="value-description">
                <p>Like a text input, but the browser will try to only allow valid email addresses.</p>
<p>On mobile devices, the email keyboard will show up.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  type="email"></input></div>
            </aside>
          </article>
          <article id="input-type-number" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;number&quot;" data-clipboard-text="type=&quot;number&quot;">
                      "number"
                  </code>
                </h4>
              <div class="value-description">
                <p>Like a text input, but the browser will try to only allow valid numbers.</p>
<p>On mobile devices, the number keyboard will show up.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  type="number"></input></div>
            </aside>
          </article>
          <article id="input-type-checkbox" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;checkbox&quot;" data-clipboard-text="type=&quot;checkbox&quot;">
                      "checkbox"
                  </code>
                </h4>
              <div class="value-description">
                <p>A toggle checkbox that can only be one of two states: checked or unchecked. The value is only submitted by the form if the checkbox is checked.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  type="checkbox"></input></div>
            </aside>
          </article>
          <article id="input-type-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                <p>You can wrap a checkbox in a label, to increase the click area.</p>

{% highlight html %}
<label>
  <input type="checkbox">
  I accept the terms and conditions
</label>
{% endhighlight %}
<p>Notice how clicking the text toggles the checkbox.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><label>
  <input type="checkbox">
  I accept the terms and conditions
</label></div>
            </aside>
          </article>
          <article id="input-type-radio" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;radio&quot;" data-clipboard-text="type=&quot;radio&quot;">
                      "radio"
                  </code>
                </h4>
              <div class="value-description">
                <p>Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  type="radio"></input></div>
            </aside>
          </article>
          <article id="input-type-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                <p>You link radio buttons through a similar <code>name</code> value:</p>

{% highlight html %}
<label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label>
{% endhighlight %}
<p>Notice how clicking one deselects the other.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label></div>
            </aside>
          </article>
          <article id="input-type-submit" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy type=&quot;submit&quot;" data-clipboard-text="type=&quot;submit&quot;">
                      "submit"
                  </code>
                </h4>
              <div class="value-description">
                <p>Submit button that is triggered when clicked or when pressing Enter.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  type="submit"></input></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="input-name" class="attribute attribute--required">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="name">
            name
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the unique identifier for that input within the form. It allows the server to access each input&#39;s value when submitted.</p>

            <strong class="attribute-is-required">Required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="input-name-first_name" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;first_name&quot;" data-clipboard-text="name=&quot;first_name&quot;">
                      "first_name"
                  </code>
                </h4>
              <div class="value-description">
                <p>The name value must be unique within the context of a <code>&lt;form&gt;</code> container.</p>
<p>It can only contain alphanumeric characters <code>a-z</code> <code>A-Z</code> <code>0-9</code> and some special characters like <code>-</code> <code>_</code>… but no space.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  name="first_name"></input></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="input-placeholder" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="placeholder">
            placeholder
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines a non-selectable placeholder text that only appears when the input is empty.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="input-placeholder-eg-alexsmithcom" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy placeholder=&quot;e.g. alex@smith.com&quot;" data-clipboard-text="placeholder=&quot;e.g. alex@smith.com&quot;">
                      "e.g. alex@smith.com"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can hint at the format expected for the input.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  placeholder="e.g. alex@smith.com"></input></div>
            </aside>
          </article>
          <article id="input-placeholder-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                <p>As a best practice, it is recommended to have a label to describe the input, and use the placeholder to showcase an example:</p>

{% highlight html %}
<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. alex@smith.com">
</form>
{% endhighlight %}
<p>Notice how the placeholder disappears on focus, hence the need to maintain a separate label.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. alex@smith.com">
</form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="input-required" class="attribute attribute--novaluebut">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="required">
            required
          </code>
        </h3>
        <div class="attribute-description">
          <p>Tells the browser that this input is <strong>required</strong>. Leaving it empty will show a warning.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="input-required-undefined" class="value">
            <header class="value-header">
              <div class="value-description">
                <p>You simply need to add the <code>required</code> attribute with no value:</p>

{% highlight html %}
<form>
  <input type="text" required>
</form>
{% endhighlight %}
<p>The browser should show a warning if you try to submit the form with an empty text input.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><form>
  <input type="text" required>
</form></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="input-disabled" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="disabled">
            disabled
          </code>
        </h3>
        <div class="attribute-description">
          <p>Disables the input.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="input-disabled-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><input  disabled></input></div>
            </aside>
          </article>
      </div>
    </article>
</section>

<section id="legend" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>block</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/legend/" data-element-name="legend" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="legend">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/legend" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#legend">
        <span>#</span>
        legend
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a <strong>caption</strong> for a parent&#39;s content.</p>

    </div>
  </header>

      <div id="legend-example-0" class="example">
        <p class="example-label">
          <strong>Example:</strong>
          <a class="example-clipboard" data-tooltip="Click to copy code" data-clipboard-target="#legend-example-0-code">Copy</a>
        </p>
        <article class="example-preview">
            <div class="example-output"><form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form></div>
          <div id="legend-example-0-code" class="example-code">{% highlight html %}<form action="/subscribe" method="post">
  <fieldset>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>{% endhighlight %}</div>
        </article>
      </div>

</section>

<section id="textarea" class="element">
  <header class="element-header">
    <nav class="element-links">
        <span>
          Type: <strong>inline</strong>
        </span>
      <span>
        Self-closing:
        <strong>
            No
        </strong>
      </span>
      <a class="element-links-direct" href="{{site.url}}/element/textarea/" data-element-name="textarea" data-tooltip="Single page for this element">Permalink</a>
      <a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="textarea">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="element-name">
      <a href="#textarea">
        <span>#</span>
        textarea
      </a>
    </h2>
    <div class="element-description">
      <p>Defines a <strong>multi-line text control</strong> within a web form.</p>

    </div>
  </header>


    <article id="textarea-name" class="attribute attribute--required">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="name">
            name
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the unique identifier for that textarea within the form. It allows the server to access each textarea&#39;s value when submitted.</p>

            <strong class="attribute-is-required">Required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-name-message" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy name=&quot;message&quot;" data-clipboard-text="name=&quot;message&quot;">
                      "message"
                  </code>
                </h4>
              <div class="value-description">
                <p>The name value must be unique within the context of a <code>&lt;form&gt;</code> container.</p>
<p>It can only contain alphanumeric characters <code>a-z</code> <code>A-Z</code> <code>0-9</code> and some special characters like <code>-</code> <code>_</code>… but no space.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-autocomplete" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="autocomplete">
            autocomplete
          </code>
        </h3>
        <div class="attribute-description">
          <p>Determines if the browser can autocomplete the textarea.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-autocomplete-off" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy autocomplete=&quot;off&quot;" data-clipboard-text="autocomplete=&quot;off&quot;">
                      "off"
                  </code>
                </h4>
              <div class="value-description">
                <p>The browser will <strong>disable</strong> autocomplete functions..</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="off"></textarea></div>
            </aside>
          </article>
          <article id="textarea-autocomplete-on" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy autocomplete=&quot;on&quot;" data-clipboard-text="autocomplete=&quot;on&quot;">
                      "on"
                  </code>
                </h4>
              <div class="value-description">
                <p>The browser will <strong>enable</strong> autocomplete functions.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-minlength" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="minlength">
            minlength
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the minimum amount of characters the textarea required to be valid.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-minlength-15" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy minlength=&quot;15&quot;" data-clipboard-text="minlength=&quot;15&quot;">
                      "15"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-maxlength" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="maxlength">
            maxlength
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the maxlength amount of characters allowed.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-maxlength-140" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy maxlength=&quot;140&quot;" data-clipboard-text="maxlength=&quot;140&quot;">
                      "140"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-placeholder" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="placeholder">
            placeholder
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines a non-selectable placeholder text that only appears when the textarea is empty.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-placeholder-eg-hello-my-name-is-alex" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy placeholder=&quot;e.g. Hello my name is Alex&quot;" data-clipboard-text="placeholder=&quot;e.g. Hello my name is Alex&quot;">
                      "e.g. Hello my name is Alex"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can hint at the format expected for the textarea.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-cols" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="cols">
            cols
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the number of columns.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-cols-40" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy cols=&quot;40&quot;" data-clipboard-text="cols=&quot;40&quot;">
                      "40"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="10" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-rows" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="rows">
            rows
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines the number of rows.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-rows-5" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy rows=&quot;5&quot;" data-clipboard-text="rows=&quot;5&quot;">
                      "5"
                  </code>
                </h4>
              <div class="value-description">
                <p>You can use <strong>integers</strong>.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-wrap" class="attribute">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="wrap">
            wrap
          </code>
        </h3>
        <div class="attribute-description">
          <p>Defines how the text should be wrapped.</p>

        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-wrap-hard" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy wrap=&quot;hard&quot;" data-clipboard-text="wrap=&quot;hard&quot;">
                      "hard"
                  </code>
                </h4>
              <div class="value-description">
                <p>The text will always be wrapped depending on the <code>cols</code> value.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="hard"></textarea></div>
            </aside>
          </article>
          <article id="textarea-wrap-soft" class="value">
            <header class="value-header">
                <h4 class="value-name">
                  <code class="tag" data-tooltip="Click to copy wrap=&quot;soft&quot;" data-clipboard-text="wrap=&quot;soft&quot;">
                      "soft"
                  </code>
                </h4>
              <div class="value-description">
                <p>The text will only break when needed.</p>

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft"></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-disabled" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="disabled">
            disabled
          </code>
        </h3>
        <div class="attribute-description">
          <p>Disables the textarea.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-disabled-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-required" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="required">
            required
          </code>
        </h3>
        <div class="attribute-description">
          <p>Tells the browser that this textarea is <strong>required</strong>. Leaving it empty will show a warning.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-required-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-autofocus" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="autofocus">
            autofocus
          </code>
        </h3>
        <div class="attribute-description">
          <p>Sets focus on the textarea when the web page loads.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-autofocus-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-readonly" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="readonly">
            readonly
          </code>
        </h3>
        <div class="attribute-description">
          <p>Turns the textarea into a read-only element.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-readonly-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required readonly></textarea></div>
            </aside>
          </article>
      </div>
    </article>
    <article id="textarea-spellcheck" class="attribute attribute--novalue">
      <header class="attribute-header">
        <h3 class="attribute-name">
          <code class="tag" data-tooltip="Click to copy" data-clipboard-text="spellcheck">
            spellcheck
          </code>
        </h3>
        <div class="attribute-description">
          <p>Enables the browser spell checker.</p>

            <strong class="attribute-is-novalue">No value required.</strong>
        </div>
      </header>

      <div class="attribute-values">
          <article id="textarea-spellcheck-undefined" class="value">
            <header class="value-header">
              <div class="value-description">

              </div>
            </header>
            <aside class="value-preview">
              <div class="value-output"><textarea  columns="40" rows="5" placeholder="e.g. Hello my name is Alex" name="message" autocomplete="on" minlength="15" maxlength="140" cols="40" wrap="soft" disabled required readonly spellcheck></textarea></div>
            </aside>
          </article>
      </div>
    </article>
</section>

